@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局样式 */
@layer base {
  body {
    @apply font-sans antialiased bg-gray-50;
  }
}

/* 自定义组件样式 */
@layer components {
  /* 卡片悬停效果 */
  .novel-card {
    @apply transform transition-all duration-300 ease-in-out;
  }
  
  .novel-card:hover {
    @apply scale-[1.02] shadow-xl;
  }
  
  /* 按钮样式 */
  .btn-primary {
    @apply px-6 py-2 bg-primary-500 text-white rounded-lg font-medium 
           hover:bg-primary-600 active:bg-primary-700 
           transition-colors duration-200 shadow-md;
  }
  
  .btn-secondary {
    @apply px-6 py-2 border-2 border-primary-500 text-primary-500 rounded-lg font-medium 
           hover:bg-primary-50 active:bg-primary-100 
           transition-colors duration-200;
  }
  
  /* 输入框样式 */
  .input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg 
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
           transition-all duration-200;
  }
}

/* 动画 */
@layer utilities {
  .fade-enter-active,
  .fade-leave-active {
    @apply transition-opacity duration-300;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    @apply opacity-0;
  }
}

